<template>
    <div>
        <div v-for="(store, index) in store_list" :key="index">
            <el-tag>{{ store.store_name }}</el-tag>
            <el-row :gutter="40" class="panel-group">
                <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
                    <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
                        <div class="card-panel-icon-wrapper icon-people">
                            <!-- <svg-icon icon-class="peoples" class-name="card-panel-icon" /> -->
                            <i class="iconfont icon-dingdan3" style="font-size: 25px"></i>
                            <div style="text-align: center;margin-top: 5px">订单</div>
                        </div>
                        <div class="card-panel-description" style="padding-top: 5px">
                            <div class="card-panel-text">
                                已支付
                            </div>
                            <div style="text-align: center;font-size: 26px">{{ store.statistic.order_payed }}</div>
                        </div>
                        <div class="card-panel-description" style="padding-top: 5px">
                            <div class="card-panel-text">
                                今日下单
                            </div>
                            <div style="text-align: center;font-size: 26px">{{ store.statistic.order_total }}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="18" :sm="18" :lg="8" class="card-panel-col">
                    <div class="card-panel" @click="handleSetLineChartData('messages')">
                        <div class="card-panel-icon-wrapper icon-message">
                            <!-- <svg-icon icon-class="international" class-name="card-panel-icon" /> -->
                            <i class="iconfont icon-yue" style="font-size: 25px"></i>
                            <div style="text-align: center;margin-top: 5px">财务</div>
                        </div>
                        <div class="card-panel-description" style="padding-top: 5px">
                            <div class="card-panel-text">
                                微信支付
                            </div>
                            <div style="text-align: center;font-size: 26px">{{ parseMoney(store.statistic.money_wx) }}</div>
                        </div>
                        <div class="card-panel-description" style="padding-top: 5px">
                            <div class="card-panel-text">
                                余额支付
                            </div>
                            <div style="text-align: center;font-size: 26px">{{ parseMoney(store.statistic.money_balance) }}</div>
                        </div>
                        <div class="card-panel-description" style="padding-top: 5px">
                            <div class="card-panel-text">
                                今日付款
                            </div>
                            <div style="text-align: center;font-size: 26px">{{ parseMoney(store.statistic.money_total) }}</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import CountTo from 'vue-count-to'

import { all as statistic_all } from '@/shop/api/statistic/statistic'

export default {
    components: {
        CountTo
    },
    data() {
        return {
            store_list: []
        }
    },
    created() {
        statistic_all().then(res => {
            this.store_list = res.data.items
        })
    },
    methods: {
        parseMoney(x) {
            var f_x = parseFloat(x);
            if (isNaN(f_x)) {
                alert('function:changeTwoDecimal->parameter error');
                return false;
            }
            f_x = Math.round(f_x * 100) / 100;
            var s_x = f_x.toString();
            var pos_decimal = s_x.indexOf('.');
            if (pos_decimal < 0) {
                pos_decimal = s_x.length;
                s_x += '.';
            }
            while (s_x.length <= pos_decimal + 2) {
                s_x += '0';
            }
            return s_x;
        },
        handleSetLineChartData(type) {
            this.$emit('handleSetLineChartData', type)
        }
    }
}
</script>

<style lang="scss" scoped>
@import url("~@/common/iconfont/iconfont.css");
.panel-group {
    margin-top: 18px;

    .card-panel-col {
        margin-bottom: 32px;
    }

    .card-panel {
        height: 108px;
        cursor: pointer;
        font-size: 12px;
        position: relative;
        overflow: hidden;
        color: #666;
        background: #fff;
        box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.05);

        &:hover {
            .card-panel-icon-wrapper {
                color: #fff;
            }

            .icon-people {
                background: #40c9c6;
            }

            .icon-message {
                background: #36a3f7;
            }

            .icon-money {
                background: #f4516c;
            }

            .icon-shopping {
                background: #34bfa3;
            }
        }

        .icon-people {
            color: #40c9c6;
        }

        .icon-message {
            color: #36a3f7;
        }

        .icon-money {
            color: #f4516c;
        }

        .icon-shopping {
            color: #34bfa3;
        }

        .card-panel-icon-wrapper {
            float: left;
            margin: 14px 0 0 14px;
            padding: 16px;
            transition: all 0.38s ease-out;
            border-radius: 6px;
        }

        .card-panel-icon {
            float: left;
            font-size: 48px;
        }

        .card-panel-description {
            float: right;
            font-weight: bold;
            margin: 26px;
            margin-left: 0px;

            .card-panel-text {
                line-height: 18px;
                color: rgba(0, 0, 0, 0.45);
                font-size: 16px;
                margin-bottom: 12px;
            }

            .card-panel-num {
                font-size: 20px;
            }
        }
    }
}

@media (max-width: 550px) {
    .card-panel-description {
        display: none;
    }

    .card-panel-icon-wrapper {
        float: none !important;
        width: 100%;
        height: 100%;
        margin: 0 !important;

        .svg-icon {
            display: block;
            margin: 14px auto !important;
            float: none !important;
        }
    }
}
</style>
